<template>
  <div>
    <!-- <div
      id="main"
      style="width: 100%; height: 600px"
      @contextmenu.prevent="rightClick($event)"
    >
      

      <div class="grid-content" v-for="it in data" :key="it">
        
        <el-icon
          style="vertical-align: middle; margin-top: 20%"
          @dblclick="comein(it)"
          @contextmenu.prevent="show1($event,it.name)"
        >
        <div id="contextmenu" v-show="itv&&it.name==nowname" class="menu1">
          <div class="contextmenu__item" @click="comein(it)">查看</div>
          <div class="contextmenu__item" @click="dele">删除</div>
          <div class="contextmenu__item" @click="rena">重命名</div>
          <div class="contextmenu__item" @click="rena">共享</div>
        </div>
          <Folder
            v-if="it.type == 'folder'"
            style="transform: scale(5); color: #3f5c85"
          ></Folder>
          <Key
            v-if="it.type !== 'folder'"
            style="transform: scale(5); color: #3f5c85"
          ></Key>
        </el-icon>
        <h2 v-if="!renav" style="margin-top: 30px">{{ it.name }}</h2>
        <el-input
          maxlength="10"
          v-if="renav"
          style="margin-top: 30px"
          v-model="it.name"
          placeholder="请输入"
          show-word-limit
          @keyup.enter="rena"
        />
      </div>
      <el-pagination
        layout="prev, pager, next"
        :total="(10 * data.length) / 15"
        class="page"
      ></el-pagination>
    </div>
    <div v-show="ups || desh" class="gap"></div>
    <div v-show="ups" class="ups" id="ups">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="upload"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary" 
          >Click to upload</el-button
        >
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </div>
    <div v-show="desh" class="desh">
      <fd class="fd" :data="datait"></fd>
    </div> -->
  </div>
</template>

<script>
import { Folder } from "@element-plus/icons";
// import { Vue } from "vue";
import { Key } from "@element-plus/icons";
import { ElMessageBox, ElMessage } from "element-plus";
import fd from "./child_data/FoDe.vue";
// import {FS} from "FolderShow";
// Vue.use(VueContextMenu);
export default {
  // components: { Folder, Key, fd },
  // name: "bt",
  // data() {
  //   return {
  //     nowname:'',
  //     renav: false,
  //     desh: false,
  //     ups: false,
  //     itv: false,
  //     fileList: [],
  //     menuVisible: false,
  //     datait: {
  //       name: "z",
  //       type: "png",
  //       author: "zzz",
  //       description:
  //         "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
  //     },
  //     data: [
  //       {
  //         name: "zzz",
  //         type: "png",
  //         author: "zzz",
  //         description:
  //           "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
  //       },
  //       {
  //         name: "zzz1",
  //         type: "folder",
  //         author: "zzz",
  //         description: "",
  //       },
  //     ],
  //   };
  // },

  // methods: {
  //   handleRemove(file){
  //     console.log(file.name);
  //   },
  //   upload(re,file,fileLi) {
  //     let newData={
  //       name:file.name.split('.')[0],
  //       type:file.name.split('.')[1],
  //       author:'zzz',
  //       description:'',
  //     };
  //     this.data.push(newData);
  //     //应该传到后端，再刷新。
  //   },
  //   rightClick(event) {
  //     if (event.path[0].id !== "main") {
  //       return;
  //     }
  //     console.log(event);
  //     this.itv = false;
  //     this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
  //     this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
  //     event.preventDefault(); //关闭浏览器右键默认事件

  //     let menu = document.querySelector(".menu");
  //     this.styleMenu(event, menu);
  //   },
  //   foo() {
  //     // 取消鼠标监听事件 菜单栏
  //     this.menuVisible = false;

  //     document.removeEventListener("click", this.foo); // 关掉监听，
  //   },
  //   fooit() {
  //     // 取消鼠标监听事件 菜单栏
  //     this.itv = false;

  //     document.removeEventListener("click", this.fooit); // 关掉监听，
  //   },
  //   fooup() {
  //     // 取消鼠标监听事件 菜单栏

  //     this.ups = false;
  //     document.removeEventListener("dblclick", this.fooup); // 关掉监听，
  //   },
  //   foode() {
  //     // 取消鼠标监听事件 菜单栏

  //     this.desh = false;
  //     document.removeEventListener("dblclick", this.foode); // 关掉监听，
  //   },
  //   styleMenu(event, menu) {
  //     if (event.clientX > 1800) {
  //       menu.style.left = event.offsetX + "px";
  //     } else {
  //       menu.style.left = event.offsetX + "px";
  //     }
  //     document.addEventListener("click", this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
  //     if (event.clientY > 700) {
  //       menu.style.top = event.offsetY + "px";
  //     } else {
  //       menu.style.top = event.offsetY + "px";
  //     }
  //   },

  //   crefo() {
  //     ElMessageBox.prompt("Please input folder name", "Tip", {
  //       confirmButtonText: "OK",
  //       cancelButtonText: "Cancel",
  //       // inputPattern: / /,
  //       inputErrorMessage: "Invalid Name",
  //     })
  //       .then(({ value }) => {
  //         ElMessage({
  //           type: "success",
  //           message: `Your name is:${value}`,
  //         });
  //         this.data.push({
  //           name: value,
  //           type: "folder",
  //         });
  //         //然后传到后台去
  //       })
  //       .catch(() => {
  //         ElMessage({
  //           type: "info",
  //           message: "Input canceled",
  //         });
  //       });
  //   },
  //   addfile() {
  //     this.ups = true;
  //     document.addEventListener("dblclick", this.fooup);
  //     // document.getElementById("contextmenu").removeEventListener("click", this.fooup);
  //     // document.getElementById("ups").removeEventListener("click", this.fooup);
  //   },
  //   reda(name) {
  //     //这里用axios接收后台传过来的文件夹内容，一次只申请最多15条
  //     let da = [
  //       {
  //         name: name + "1",
  //         type: "folder",
  //         author: "zzz",
  //         description:
  //           "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
  //       },
  //       {
  //         name: name + "2",
  //         type: "png",
  //         author: "zzz",
  //         description: "",
  //       },
  //     ];
  //     return da;
  //   },
  //   comein(it) {
  //     if (it.type == "folder") {
  //       this.data = this.reda(it.name);
  //     } else {
  //       this.datait = it;
  //       this.desh = true;

  //       let sleep = function (fun, time) {
  //         setTimeout(() => {
  //           document.addEventListener("dblclick", fun);
  //         }, time);
  //       };

  //       sleep(this.foode, 200);
  //     }
  //   },
  //   show1(event,n) {
  //     this.nowname=n;
  //     console.log(event);
  //     this.itv = false;
  //     this.menuVisible = false;
  //     this.itv = true;
  //     let menu = document.querySelector(".menu1");
  //     menu.style.left = event.clientX + "px";
  //     menu.style.top = event.clientY + "px";
  //     console.log(menu.style.left);
  //     document.addEventListener("click", this.fooit);
  //   },
  //   show2() {
  //     alert("触发了右击事件2");
  //   },
  //   rena() {
  //     this.renav = !this.renav;
  //   },
  // },
};
</script>

<style scoped>
.page {
  position: absolute;
  bottom: 2px;
  left: 370px;
}
.bg-purple-dark {
  background: #3f5c85;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  height: 136px;
  width: 186px;
  margin: 10px;
  text-align: center;
  display: inline-block;
}
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.menu1 {
  position: fixed;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.ups {
  position: fixed;
  z-index: 20;
  left: 30%;
  top: 30%;
  width: 400px;
  height: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22), 0 0 12px rgba(65, 46, 46, 0.08);
}
.desh {
  position: fixed;
  z-index: 10;
  left: 30%;
  top: 30%;
  width: 600px;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22), 0 0 12px rgba(65, 46, 46, 0.08);
}
.gap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #09203fa2;
  z-index: 1;
}
.fd {
  position: relative;
  top: 25px;
  left: 25px;
  width: 550px;
  height: 350px;
  z-index: 15;
}
.upload-demo {
  margin: 20px;
}
</style>
